var app = new Vue({
	el: '#app',
	data() {
		return {
			isDefault: true,
			form: {
				aaa: [dayjs().subtract(1, 'month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
				bbb: [dayjs().subtract(1, 'month').subtract(1, 'year').format('YYYY-MM-DD'), dayjs().subtract(1, 'year').format('YYYY-MM-DD')],
				ccc: '1',
				ddd: '',
				eee: 0,
				fff: '1',
			},
			// 图表配置
			chartOption: {},
			// 表格数据
			tableHead: [
				{label: '商品信息', prop: 'spxx', fixed: 'left', width: 380},
				{label: '总销量', prop: 'zxl', sortable: true, align: 'right', width: 180},
				{label: '短视频销量', prop: 'dspxl', sortable: true, align: 'right', width: 140},
				{label: '直销销量', prop: 'zxxl', sortable: true, align: 'right', width: 120},
				{label: '商品卡销量', prop: 'spkxl', sortable: true, align: 'right', width: 140},
				{label: '商品曝光次数', prop: 'spbgcs', sortable: true, align: 'right', width: 150},
				{label: '商品点击次数', prop: 'spdjcs', sortable: true, align: 'right', width: 150},
				{label: '商品加购次数', prop: 'spjgcs', sortable: true, align: 'right', width: 150},
				{label: '品质差评率', prop: 'pzcpl', sortable: true, align: 'right', width: 140},
				{label: '品质退货退款率', prop: 'pzthtkl', sortable: true, align: 'right', width: 160},
				{label: '点击率', prop: 'djl', sortable: true, align: 'right', width: 120},
				{label: '加购率', prop: 'jgl', sortable: true, align: 'right', width: 120},
				{label: '转化率', prop: 'zhl', sortable: true, align: 'right', width: 120},
			],
			tableData: CONFIG.tableData,
		}
	},
	computed: {
		// 绿色总量
		greenTotal() {
			if(this.isDefault) {
				return CONFIG.tj.zxl.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				this.chartOption.series[0].data.forEach(num => {
					res += num;
				})
			}
			return res;
		},
		// 黄色总量
		yellowTotal() {
			let res = 0;
			if(this.chartOption?.series?.length) {
				this.chartOption.series[1].data.forEach(num => {
					res += num;
				})
			}
			return res;
		},
		// 总数较上期变化
		totalBfl() {
			if(this.isDefault) {
				return CONFIG.tj.zxl.bhl;
			}
			let res = 0;
			if(this.yellowTotal > 0 && this.greenTotal > 0) {
				res = (this.greenTotal / this.yellowTotal * 100).toFixed(2);
			}
			return res;
		},
		// 商品曝光数，每天取值在15000-30000之间
		spbgs() {
			if(this.isDefault) {
				return CONFIG.tj.spbgcs.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				let days = this.chartOption.series[0].data.length;
				res = days * parseInt(Math.random()*(30000-15000))+15000;
			}
			return res;
		},
		// 商品曝光率
		spbgl() {
			if(this.isDefault) {
				return CONFIG.tj.spbgcs.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random()*(1000-500)+500).toFixed(2);
			}
			return res;
		},
		// 商品点击次数，取值1000-1500
		spdjs() {
			if(this.isDefault) {
				return CONFIG.tj.spdjcs.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				let days = this.chartOption.series[0].data.length;
				res = days * parseInt(Math.random()*(1500-1000))+1000;
			}
			return res;
		},
		// 商品点击率
		spdjl() {
			if(this.isDefault) {
				return CONFIG.tj.spdjcs.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random()*(800-300)+300).toFixed(2);
			}
			return res;
		},
		// 转化率较上期
		zhl() {
			if(this.isDefault) {
				return CONFIG.tj.zhl.num;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = (Math.random() + Number(this.zhl2)).toFixed(2);
			}
			return res;
		},
		// 转化率较上期
		zhl2() {
			if(this.isDefault) {
				return CONFIG.tj.zhl.bhl;
			}
			let res = 0;
			if(this.chartOption?.series?.length) {
				res = Math.random().toFixed(2);
			}
			return res;
		},
		// 销售趋势
		xsqsData() {
			let res = CONFIG.xsqs;
			if(!this.isDefault) {
				res[0].num = this.greenTotal;
				res[0].result = this.totalBfl;

				res[1].num = this.spbgs;
				res[1].result = this.spbgl;

				res[2].num = this.spdjs;
				res[2].result = this.spdjl;

				res[3].num = this.zhl+'%';
				res[3].result = this.zhl2;
			}
			let vs = dayjs(this.form.bbb[0]).format('MM-DD') + ' 至 ' + dayjs(this.form.bbb[1]).format('MM-DD');
			res.forEach((item, index) => {
				if(index != 3) {
					item.num = item.num.toLocaleString();
				}
				item.vs = vs;
			})

			return res;
		}
	},
	mounted() {
		this.getTopOptions(true);
	},
	methods: {
		changeDate() {
			this.isDefault = false;
			this.getTopOptions();
		},

		getTopOptions() {
			if(this.form.aaa.length!=2 || !this.form.aaa[0] || !this.form.aaa[1]) {
				return;
			}
			// 获取x轴数据
			let xData = [];
			let diffDays = dayjs(this.form.aaa[1]).diff(dayjs(this.form.aaa[0]), 'day');
			let start = dayjs(this.form.aaa[0]).valueOf();
			for(let i = 0; i < diffDays; i++) {
				xData.push(dayjs(start+i*24*60*60*1000).format('MM-DD'));
			}
			// 获取绿色数据
			let yData1 = [];
			if(this.isDefault) {
				yData1 = CONFIG.chartData.map(item => item.green).slice(0, diffDays);
			} else {
				yData1 = Tools.getRangeData(CONFIG.chatGreenRange, diffDays);
			}
			// 获取黄色数据
			let yData2 = [];
			if(this.isDefault) {
				yData2 = CONFIG.chartData.map(item => item.yellow).slice(0, diffDays);
			} else {
				yData2 = Tools.getRangeData(CONFIG.chatYellowRange, diffDays);
			}
			// let arr = yData1.map((num, index) => {
			// 	return {
			// 		green: num,
			// 		yellow: yData2[index]
			// 	}
			// })
			// console.log(JSON.stringify(arr));

			this.chartOption = {
				color: ['#01A4A4', '#E6A23C'],
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: [`总销量（${dayjs(this.form.aaa[0]).format('YYYY-MM-DD')}-${dayjs(this.form.aaa[1]).format('YYYY-MM-DD')}）`, `总销量（${dayjs(this.form.bbb[0]).format('YYYY-MM-DD')}-${dayjs(this.form.bbb[1]).format('YYYY-MM-DD')}）`]
				},
				grid: {
					left: '2%',
					right: '2%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xData
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: `总销量（${dayjs(this.form.aaa[0]).format('YYYY-MM-DD')}-${dayjs(this.form.aaa[1]).format('YYYY-MM-DD')}）`,
						type: 'line',
						data: yData1
					},
					{
						name: `总销量（${dayjs(this.form.bbb[0]).format('YYYY-MM-DD')}-${dayjs(this.form.bbb[1]).format('YYYY-MM-DD')}）`,
						type: 'line',
						data: yData2
					},
				]
			}
		},


		// 获取图标配置
		getTableOptions(data) {
			return {
				color: ['#01A4A4'],
				grid: {
					top: 0,
					left: 0,
					right: 0,
					bottom: 0
				},
				xAxis: {
					show: false,
				  type: 'category',
				  boundaryGap: false,
				  data: data.map((item, index) => index)
				},
				yAxis: {
				  type: 'value',
				  show: false,
				},
				series: [
				  {
					data: data,
					type: 'line',
					symbol: 'none',
					smooth: true,
					areaStyle: {
						opacity: 0.1
					}
				  }
				]
			  }
		}
	}
})